@import "//at.alicdn.com/t/font_1834734_h3m3r4y7l6a.css";

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
	padding: 0;
	margin: 0;
}

body {
	font-family: Helvetica, sans-serif;
	-webkit-tap-highlight-color: transparent;
	background: #000;
}

html {
	color: #333;
	background: #fff;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

audio,
canvas,
video {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset,
img,
abbr,
acronym {
	border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style: normal;
	font-weight: normal;
}

ol,
ul {
	list-style: none;
}

caption,
th {
	text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

q:before,
q:after {
	content: '';
}

abbr,
acronym {
	border: 0;
	font-variant: normal;
}

sup {
	vertical-align: text-top;
}

sub {
	vertical-align: text-bottom;
}

input,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	-webkit-tap-highlight-color: transparent;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input {
	outline: none;
	border-radius: 0;
}

input[type="submit"],
input[type="reset"],
input[type="number"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

a {
	text-decoration: none;
	-webkit-touch-callout: none;
}

img {
	max-width: 100%;
}

* {
	box-sizing: border-box;
}

html,
body {
	max-width: 750px;
	margin: 0 auto;
}

body {
	position: relative;
}

.login-box {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	background-color: #000;
	position: fixed;
	top: 0;
}

.login-box canvas {
	width: 100%;
	height: auto;
	display: inline-block;
	vertical-align: baseline;
	position: absolute;
	z-index: 2;
}

.login-box .canvaszz {
	width: 100%;
	background: url(../img/body.jpg) no-repeat  0 .5rem;
	background-size: 10rem auto;
	height: 100vh;
	position: absolute;
	z-index: 10;
	filter: alpha(opacity=40);
	-moz-opacity: 0.4;
	-khtml-opacity: 0.4;
	opacity: 0.4;
}

.gd-abs {
	position: absolute;
	background: url(../img/absgd.png) no-repeat;
	opacity: .6;
	background-size: 2.44rem 2.48rem;
	width: 2.44rem;
	height: 2.48rem;
	animation: page3_number 5s infinite linear;
	right: 0.666666rem;
	top: 1.333333rem;
	z-index: 10;
}

.gd-abs2{
	right: 80%;
	top: 70%;
	opacity: .3;
	background-size: 3rem 3rem;
	width: 3rem;
	height:3rem;
}
.gd-abs3{
	background: url(../img/number.png) no-repeat;
	right: -30%;
	top: 40%;
	opacity: .2;
	background-size: 6rem 6rem;
	width: 6rem;
	height:6rem;
	
}
.starb{
	position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../img/stardown3.png) no-repeat center;
	background-size: 9.626666rem 2.933333rem;
	width: 100%;
	height: 2.933333rem;
	opacity: .4;
}



@keyframes page3_number {
	0% {
		transform: rotateZ(360deg);
	}

	100% {
		transform: rotateZ(0deg);
	}
}

.liuxing1,
.liuxing2,
.liuxing3,
.liuxing4,
.liuxing5,
.liuxing6 {
	position: fixed;
	z-index: 9999
}

.liuxing1 {
	animation: liuxing1 8s infinite;
	top: -100px;
	left: 140px;
	width: 40px;
}

@keyframes liuxing1 {
	0% {
		top: -100px;
		left: 140px;
	}

	100% {
		top: 196px;
		left: -70px;
	}
}

.liuxing2 {
	animation: liuxing2 4s infinite;
	top: -100px;
	left: 180px;
	width: 70px;
}

@keyframes liuxing2 {
	0% {
		top: -100px;
		left: 180px;
	}

	100% {
		top: 250px;
		left: -70px;
	}
}

.liuxing3 {
	animation: liuxing3 5s infinite;
	top: -120px;
	left: 280px;
	width: 40px;
}

@keyframes liuxing3 {
	0% {
		top: -120px;
		left: 280px;
	}

	100% {
		top: 392px;
		left: -70px;
	}
}

.liuxing4 {
	animation: liuxing4 9s infinite;
	top: -160px;
	left: 240px;
	width: 50px;
}

@keyframes liuxing4 {
	0% {
		top: -160px;
		left: 240px;
	}

	100% {
		top: 336px;
		left: -70px;
	}
}

.liuxing5 {
	animation: liuxing5 3.6s infinite;
	top: -120px;
	left: 320px;
	width: 60px;
}

@keyframes liuxing5 {
	0% {
		top: -120px;
		left: 320px;
	}

	100% {
		top: 448px;
		left: -70px;
	}
}

.liuxing6 {
	animation: liuxing6 7s infinite;
	top: -140px;
	left: 380px;
	width: 60px;
}

@keyframes liuxing6 {
	0% {
		top: -140px;
		left: 380px;
	}

	100% {
		top: 532px;
		left: -70px;
	}
}

.index-apmBox {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translate(0, -50%);
	z-index: 500;

}

.main {
	height: 100vh;
}

.search {

	height: 1rem;
	line-height: 1rem;

	max-width: 90%;
	margin: 0 auto;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.search input.search-txt {
	height: 1rem;
	line-height: 1rem;
	width: 100%;
	padding-left:0.4rem;
	font-size: 0.426666rem;
	color: #2890fa;
	border: 1px solid #2890fa;
	background: rgba(40, 144, 250, 0.2);
	border-radius: 0.5rem;
	padding-right: .98rem;
}
.search input.search-txt:focus,.search input.search-txt:hover{
	-webkit-box-shadow: 0 0 8px #1d7eb8;
	transition-duration: 0.5s;
	background: rgba(40, 144, 250, 0.4);
}


.search button {
	height: 1rem;
	width: 15%;
	font-size: 0.613333rem;
	border: none;
	background: transparent;
	color: #fff;
	outline: none;
	position: absolute;
	right: 0.48rem;
	top: 0;
}

input::-webkit-input-placeholder {
	color: #2890fa;
	opacity: .7;
}

input::-moz-placeholder {
	/* Mozilla Firefox 19+ */
	color: #2890fa;
	opacity: .7;
}

input:-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
	color: #2890fa;
	opacity: .7;
}

input:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: #2890fa;
	opacity: .7;
}
#errormsg{
	line-height: 1.6;
	color: #2890fa;
	border: 1px solid #2890fa;
	background: rgba(40, 144, 250, 0.2);
	text-align: center;
	position: fixed;
	left: 50%;
	top: 20%;
	padding:.2rem;
	font-size: .36rem;
	transform: translate(-50%,-50%);
	display: none;
	border-radius: .2rem;
	max-width: 5rem;
	z-index: 200;
}

/* 登录页面 */

.input-content{
	position: fixed;
	z-index: 200;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 75%;
	margin: 0 auto;
}
.input-item{
	margin-bottom: 0.533333rem;
	position: relative;
}
.input-item input{
	height: 1rem;
	line-height: 1rem;
	width: 100%;
	padding-left:0.4rem;
	font-size: 0.426666rem;
	color: #2890fa;
	border: 1px solid #2890fa;
	background: rgba(40, 144, 250, 0.2);
}

.input-item input:focus,.input-item input:hover{
	-webkit-box-shadow: 0 0 8px #1d7eb8;
	transition-duration: 0.5s;
	background: rgba(40, 144, 250, 0.4);
}
.code-btn{
	position: absolute;
	right: .1rem;
	top: .1rem;
	height: .8rem;
	border: none;
	font-size:0.33rem;
	color: #fff;
	outline: none;
	background: rgba(40, 144, 250, 0.8);
	padding: 0 .4rem;
}
.login-btn{
	height: 1.2rem;
	line-height: 1.2rem;
	background: transparent;
	border: none;
	color: #fff;
	display: block;
	width: 100%;
	background: rgba(40, 144, 250, 0.6);
	border-radius: .6rem;
	outline: none;
	font-size: .4rem;
	
}
.login-btn:focus,.login-btn:hover{
	-webkit-box-shadow: 0 0 8px #1d7eb8;
	transition-duration: 0.5s;
	background: rgba(40, 144, 250, 1);
}



.loader {
	position: absolute;
	top: 40%;
	left: 50%;	
	transform: translate(-50%, -50%);
	text-align: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default
}

.loader .text {
	position: absolute;
	top: 1.8em;
	left: .4em;
	z-index: 5;
	font-size: 2em;
	text-transform: uppercase;
	-webkit-animation: text 2.5s cubic-bezier(.75, 0, .5, 1) infinite normal;
	-moz-animation: text 2.5s cubic-bezier(.75, 0, .5, 1) infinite normal;
	-ms-animation: text 2.5s cubic-bezier(.75, 0, .5, 1) infinite normal;
	-o-animation: text 2.5s cubic-bezier(.75, 0, .5, 1) infinite normal;
	animation: text 2.5s cubic-bezier(.75, 0, .5, 1) infinite normal;
	color: #fff;
}

.spinner {
	position: relative;
	width: 5em;
	height: 5em;
	color: #fff
}

.spinner:before,
.spinner:after {
	content: "";
	position: relative;
	display: block
}

.spinner:before {
	-webkit-animation: spinner 2.5s cubic-bezier(.75, 0, .5, 1) infinite normal;
	-moz-animation: spinner 2.5s cubic-bezier(.75, 0, .5, 1) infinite normal;
	-ms-animation: spinner 2.5s cubic-bezier(.75, 0, .5, 1) infinite normal;
	-o-animation: spinner 2.5s cubic-bezier(.75, 0, .5, 1) infinite normal;
	animation: spinner 2.5s cubic-bezier(.75, 0, .5, 1) infinite normal;
	width: 10em;
	height: 10em;
	background-color: #db2f00
}

.spinner:after {
	-webkit-animation: shadow 2.5s cubic-bezier(.75, 0, .5, 1) infinite normal;
	-moz-animation: shadow 2.5s cubic-bezier(.75, 0, .5, 1) infinite normal;
	-ms-animation: shadow 2.5s cubic-bezier(.75, 0, .5, 1) infinite normal;
	-o-animation: shadow 2.5s cubic-bezier(.75, 0, .5, 1) infinite normal;
	animation: shadow 2.5s cubic-bezier(.75, 0, .5, 1) infinite normal;
	position: relative;
	bottom: -1.75em;
	height: .25em;
	border-radius: 50%;
	background-color: #322b27
}

@-webkit-keyframes spinner {
	50% {
		-webkit-border-radius: 50%;
		-webkit-transform: scale(.5) rotate(360deg);
		background-color: #13a3a5
	}

	100% {
		-webkit-transform: scale(1) rotate(720deg);
		background-color: #db2f00
	}
}

@-moz-keyframes spinner {
	50% {
		-moz-border-radius: 50%;
		-moz-transform: scale(.5) rotate(360deg);
		background-color: #13a3a5
	}

	100% {
		-moz-transform: scale(1) rotate(720deg);
		background-color: #db2f00
	}
}

@-mos-keyframes spinner {
	50% {
		-mos-border-radius: 50%;
		-mos-transform: scale(.5) rotate(360deg);
		background-color: #13a3a5
	}

	100% {
		-mos-transform: scale(1) rotate(720deg);
		background-color: #db2f00
	}
}

@-o-keyframes spinner {
	50% {
		-o-border-radius: 50%;
		-o-transform: scale(.5) rotate(360deg);
		background-color: #13a3a5
	}

	100% {
		-o-transform: scale(1) rotate(720deg);
		background-color: #db2f00
	}
}

@keyframes spinner {
	50% {
		border-radius: 50%;
		transform: scale(.5) rotate(360deg);
		background-color: #13a3a5
	}

	100% {
		transform: scale(1) rotate(720deg);
		background-color: #db2f00
	}
}

@-webkit-keyframes shadow {
	50% {
		-webkit-transform: scale(.5);
		background-color: #322b27
	}
}

@-moz-keyframes shadow {
	50% {
		-moz-transform: scale(.5);
		background-color: #322b27
	}
}

@-mos-keyframes shadow {
	50% {
		-mos-transform: scale(.5);
		background-color: #322b27
	}
}

@-o-keyframes shadow {
	50% {
		-o-transform: scale(.5);
		background-color: #322b27
	}
}

@keyframes shadow {
	50% {
		transform: scale(.5);
		background-color: #322b27
	}
}

@-webkit-keyframes text {
	0% {
		-webkit-transform: scale(1, 1)
	}

	50% {
		-webkit-transform: scale(.5, .5)
	}

	100% {
		-webkit-transform: scale(1, 1)
	}
}

@-moz-keyframes text {
	0% {
		-moz-transform: scale(1, 1)
	}

	50% {
		-moz-transform: scale(.5, .5)
	}

	100% {
		-moz-transform: scale(1, 1)
	}
}

@-mos-keyframes text {
	0% {
		-mos-transform: scale(1, 1)
	}

	50% {
		-mos-transform: scale(.5, .5)
	}

	100% {
		-mos-transform: scale(1, 1)
	}
}

@-o-keyframes text {
	0% {
		-o-transform: scale(1, 1)
	}

	50% {
		-o-transform: scale(.5, .5)
	}

	100% {
		-o-transform: scale(1, 1)
	}
}

@keyframes text {
	0% {
		transform: scale(1, 1)
	}

	50% {
		transform: scale(.5, .5)
	}

	100% {
		transform: scale(1, 1)
	}
}

.login-pop{
	position: fixed;
	z-index: 2000;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}

#loader {
  display: flex;
  justify-content: center;
  align-items: center;
}

#loader {
  flex-direction: column-reverse;
  color: #1d7eb8;
  font: 2.5em sans-serif;
  position: absolute;
      top: 60%;
      left: 50%;
	  transform: translate(-50%, -50%);
	  width: 100%;
}
progress[value] {
  width: 80%;
  height: 0.25em;
  border: none;
  border-radius: 0.125em;
  background: #e6eeff;
}
progress[value]::-webkit-progress-bar {
  border: none;
  border-radius: 0.125em;
  background: #e6eeff;
}
progress[value]::-webkit-progress-value {
  border: none;
  border-radius: inherit;
  background: linear-gradient(90deg, #1d7eb8, #2187e7);
}
progress[value]::-moz-progress-bar {
  border: none;
  border-radius: inherit;
  background: linear-gradient(90deg, #1d7eb8, #2187e7);
}
progress[value]::-ms-fill {
  border: none;
  border-radius: inherit;
  background: linear-gradient(90deg, #1d7eb8, #2187e7);
}
output:not(:empty) {
  padding-bottom: 1em;
}
output:not(:empty):after {
  content: '%';
}

.xy-popBox{
	z-index: 1000;
	position:fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background: rgba(40, 144, 250, 0.4);
	border: 1px solid #2890fa;
	width: 80%;
	height: 70%;
	box-shadow: 0 0 8px rgba(40, 144, 250, 0.8);
	color: #fff;
	display: none;
}
.mescroll-totop{
	z-index: 20000;
}
.xy-popBox h2{
	font-size: 0.506666rem;
	text-align: center;
	background: rgba(0,0,0,.5);
	height: 1rem;
	line-height: 1rem;
}

.xy-txt{
	padding: 0.266666rem;
	height: 10rem;
	line-height: 1.8;
	font-size: 0.346666rem;
	overflow-x:hidden;
}

.closeBtn{
	position: absolute;
	right: 0;
	top: 0;
	width: 1rem;
	height: 1rem;
	text-align: center;
	line-height: 1rem;
	font-size: 0.426666rem;
}
.btn-Pop{
	margin-top: .1rem;
	height: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:0 .5rem;
	font-size:0.426666rem;
}
.btn-Pop span{
	padding: 0 .5rem;
	height: .8rem;
	line-height: .8rem;
	border-radius: .4rem;
}
span.p-btn1{
	background: #2187E7;
}
span.p-btn2{
	background: #f60;
}

.header{
	height: 1.173333rem;
	line-height: 1.173333rem;
	background: rgba(0,0,0,.9);
	position:fixed;
	width: 100%;
	z-index: 10000;
	text-align: center;
	color: #fff;
	top: 0;
	right: 0;
	left: 0;
}
.header h2{
	padding-right: 1.173333rem;
	height: 1.173333rem;
	color: #fff;
	font-size: 0.506666rem;
}
.header i{
	position: absolute;
	right: 0;
	top: 0;
	width: 1.173333rem;
	height: 1.173333rem;
	font-size: 0.466666rem;
	z-index: 10000;
}

.body-hidden{
	overflow: hidden;
}
.navigation{
	background: rgba(0,0,0,.9);
	position: fixed;
	top: 1.173333rem;
	width: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2000;
	display: none;
}

.nav-sub{
	padding-top: 20%;
	width: 100%;
}
.nav-sub li{
	line-height: 2.5;
	font-size: 0.533333rem;
	text-align: center;
}
.nav-sub li a{color: #fff;display:block;text-shadow: 2px 2px 2px #1d7eb8;}

.user-info{
	position: relative;
	z-index: 1000;
	margin: .266666rem;
	border: 1px solid #07a7ff;
	background: rgba(6, 24, 54, 0.7);
	padding: 0.266666rem;
	color: #fff;
	font-size: 0.506666rem;
	line-height: 2;
	box-shadow: 0 0 8px #1d7eb8;
	margin-top: 1.44rem;
}
.user-info  span.t{
	display: inline-block;
	width: 2.266666rem;
	text-align: right;
}

.user-info .timeBar{
	display: inline-block;
}
.user-info .timeBar label{
	color: #07a7ff;
	display: inline-block;
	padding: 0 .1rem;
}
.user-money{
	text-align: right;
	font-size: 0.4rem;
}

.my-01{
	display: inline-block;
	margin-right: .2rem;
}
.my-01 div{
	display: inline-block;
}
.my-02{
	display: inline-block;
}


.order-list{
	
}
.order-item{
	margin: .266666rem;
	background: rgba(6, 24, 54, 0.7);
	padding: 0.266666rem;
	color: #fff;
	position: relative;
	z-index: 1000;
	border: 1px solid #07a7ff;
	box-shadow: 0 0 8px #1d7eb8;
	font-size: 0.426666rem;
	line-height: 1.8;
}
.order-item p span{
	display: inline-block;
	width: 1.6rem;
	text-align: right;
}

.mescroll-upwarp{
	position: relative;
	z-index: 1000;
	
	
}
.mescroll-downwarp .downwarp-tip, .mescroll-upwarp .upwarp-tip, .mescroll-upwarp .upwarp-nodata{
	color: #fff;
	font-size: 0.426666rem;
}

.mescroll-downwarp .downwarp-progress, .mescroll-upwarp .upwarp-progress{
	border-color: #fff;
	width: 0.466666rem;
	height: 0.466666rem;
}

.user-programme{
	
	position: relative;
	z-index: 1000;
	margin: .266666rem;
	border: 1px solid #07a7ff;
	background: rgba(6, 24, 54, 0.7);
	padding: 0.266666rem;
	color: #fff;
	font-size: 0.506666rem;
	line-height: 2;
	box-shadow: 0 0 8px #1d7eb8;
	margin-top: 1.44rem;
}
.user-programme  li{
	display: flex;
	margin-bottom: .2rem;
}
.user-programme .tit{
	width:2.666666rem;
	text-align: right;
	overflow: hidden;
	color: #fff;
}
.user-programme  li .input-item { flex: 1;margin-top: .4rem;}
.user-programme .tit02{
	flex: 1;
	overflow: hidden;
	color: #2890fa;
	display: flex;
	justify-content: space-between;
}
.ying-inpt,.sun-inpt{
	width: 50%;
	height: 1rem;
	line-height: 1rem;
	padding: 0 .2rem;
	border:none;
	background: transparent;
	color: #2890fa;
}
#ying02,#sun02{
	display: none;
}

.ying-bt,.sun-btn{
	padding: 0 .4rem;
	  
}
.dw-persp{
	margin-top:-1.333333rem;
}

#demo_time,.inpt1{
	border: none;
	background: transparent;
	color: #2890fa;
	font-size: 0.506666rem;
}



















